<template>
    <div ref="root">模板引用</div>

    <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
        {{ item }} --- {{i}}
    </div>

    <h4 style="color: red" ref="root1">侦听模板的引用 </h4>
</template>

<script>
  import {ref, reactive, onBeforeUpdate, onMounted, watchEffect} from 'vue'

  export default {
    name: "06.模板引用",
    // setup() {
    //   const root = ref(null)
    //   console.log(123, root);
    //
    //   onMounted(() => {
    //     //  DOM 元素将在初始渲染后分配给 ref, 其实相当于 react 的ref,可以获取到dom 元素
    //     console.log(root.value);
    //   })
    //
    //   return {
    //     root // 在渲染上下文中暴露 root 使用
    //   }
    // }

    /** ======== JSX 中的写法 ==================*/
    // setup() {
    //   const root = ref(null)
    //
    //   return () =>
    //     h('div', {
    //       ref: root
    //     })
    //
    //   // with JSX
    //   // return () => <div ref={root} />
    // }

    /** ====== v-for 中的用法 =================== */

    // setup() {
    //   const list = reactive([1, 2, 3])
    //   const divs = ref([])
    //
    //   // 确保在每次更新之前重置ref ???
    //   onBeforeUpdate(() => {
    //     console.log('onBeforeUpdate 更新前 --->>', divs, 123, Reflect.ownKeys(divs.value), '----', Reflect.ownKeys(divs.value)[0]);
    //     divs.value = [] // 把 divs 置为空数组
    //   })
    //
    //   onMounted(() => {
    //     setTimeout(() => {
    //       list.push(4)
    //     }, 1000)
    //   })
    //   return {
    //     list,
    //     divs
    //   }
    // }


    /** ======== 侦听模板的应用 ===========*/
    setup() {
      const root1 = ref(null)

      watchEffect(() => {
        // 这个副作用在 DOM 更新之前运行，因此，模板引用还没有持有对元素的引用。
        // 所以使用模板引用的侦听器应该用 flush: 'post' 选项来定义
        console.log(root1.value)  // => null
      })

      // watchEffect(() => {
      //   // 这个副作用在 DOM 更新之前运行，因此，模板引用还没有持有对元素的引用。
      //   // 所以使用模板引用的侦听器应该用 flush: 'post' 选项来定义
      //   console.log(root.value)
      // }, {flush: 'post'})

      return {
        root1
      }
    }
  }
</script>

<style scoped>

</style>
